<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--<p>dddd</p>-->
<div id="viewUser">
    <template class="data">
        <el-input
                style="width:30%;margin-bottom: 10px;color: blue"
                placeholder="请输入搜索内容"
                v-model="query"
                clearable>
        </el-input>
        <el-button type="primary" size="small" @click="search" style="height: 40px;width: 80px;margin-bottom: 10px">搜索</el-button>
        <el-popover
                placement="right"
                width="800"
                height="800"
                trigger="click">
            <el-button  @click="getUpdateTeacher(scope.row.teacherId)" slot="reference" style="height: 40px;width: 80px;margin-left: 526px">添加</el-button>
            <el-descriptions v-model="form" title="老师添加" :column="3"  border>
                <template slot="extra">
                    <el-button type="primary" size="small" @click="add">提交</el-button>
                    <el-button type="primary" size="small" @click="reset">重置</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        用户ID
                    </template>
                    <el-input v-model="form.teacherId" style="width: 200px;height: 30px"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        用户名
                    </template>
                    <el-input v-model="form.name" style="width: 200px;height: 30px" ></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    <el-input v-model="form.password" style="width: 200px;height: 30px"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        身份证号
                    </template>
                    <el-input v-model="form.personid" style="width: 200px;height: 30px"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        性别
                    </template>
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        年龄
                    </template>
                    <el-input v-model="form.age" style="width: 200px;height: 30px" ></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        电话
                    </template>
                    <el-input v-model="form.phone" style="width: 200px;height: 30px"></el-input>
                </el-descriptions-item>
            </el-descriptions>
        </el-popover>
        <el-table
                :data="tableData"
                border
                style="width: 98%">
            <el-table-column
                    prop="pic"
                    label="老师头像"
                    width="120">
                <template slot-scope="scope">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.pic"
                            :fit="fit"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="teacherId"
                    label="老师ID"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="用户名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="personid"
                    label="身份证号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column label="操作" width="182" >
                <template slot-scope="scope">
                    <div id="update">
                        <el-popover
                                placement="right"
                                width="800"
                                height="600"
                                trigger="click">
                            <el-button  @click="getUpdateTeacher(scope.row.teacherId)" slot="reference">更新</el-button>
                            <el-descriptions v-model="form" title="老师信息更新" :column="3"  border>
                                <template slot="extra">
                                    <el-button type="primary" size="small" @click="submit">提交</el-button>
                                    <el-button type="primary" size="small" @click="reset">重置</el-button>
                                </template>
                                <el-descriptions-item>
                                    <template slot="label">
                                        用户ID
                                    </template>
                                    <el-input v-model="form.teacherId" style="width: 200px;height: 30px"></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        用户名
                                    </template>
                                    <el-input v-model="form.name" style="width: 200px;height: 30px" ></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        密码
                                    </template>
                                    <el-input v-model="form.password" style="width: 200px;height: 30px"></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        身份证号
                                    </template>
                                    <el-input v-model="form.personid" style="width: 200px;height: 30px"></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        性别
                                    </template>
                                    <el-radio-group v-model="form.sex">
                                        <el-radio label="男"></el-radio>
                                        <el-radio label="女"></el-radio>
                                    </el-radio-group>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        年龄
                                    </template>
                                    <el-input v-model="form.age" style="width: 200px;height: 30px" ></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">
                                        电话
                                    </template>
                                    <el-input v-model="form.phone" style="width: 200px;height: 30px"></el-input>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-popover>
                    </div>
                    <el-button  @click="deleteTeacher(scope.row.teacherId)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                :current-page="current"
                :page-size="limit"
                :total="total"
                style="padding:30px 0; margin-top:20px; text-align: center;"
                layout="prev, pager, next"
                @current-change="getTeacherList"></el-pagination>
    </template>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script  >

    new Vue({
        el:'#viewUser',
        data : function (){
            return{
                tableData: [],  //表格中的所有数据
                current:0,      //当前页码
                limit:3,        //每页展示记录数
                total:0,        //总记录数
                query:'',       //查询条件
                form: {
                    teacherId:'',
                    password:'',
                    personid:'',
                    name:'',
                    sex:'',
                    age: '',
                    phone:''
                },
            }
        },
        created(){
            this.getTeacherList()
        },
        methods: {
            search(){
                this.getTeacherList()
            },
            getTeacherList(page=1){
                this.current = page
                axios.get('/viewTeacher?current='+this.current+'&query='+this.query)
                    .then(response=>{
                        console.log(response)
                        this.tableData = response.data.data.pageInfo.list
                        this.current = response.data.data.pageInfo.pageNum
                        this.total = response.data.data.pageInfo.total
                        this.query = response.data.data.query
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            deleteTeacher(id){
                axios.delete(`/deleteTeacher/${id}`)
                    .then(response=>{
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code===200){
                            this.$message({showClose: true,message: msg,type: 'success'});
                            //跳转查询用户列表组件
                            this.getTeacherList()
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
            },
            getUpdateTeacher(teacherId){
                console.log(teacherId)
                axios.get(`/getUpdateTeacher/${teacherId}`)
                    .then(response=>{
                        let code = response.data.code
                        let message = response.data.message
                        if (code == 200){
                            this.form = response.data.data
                        }else {
                            this.$message({showClose:true,message:message,type:'error'})
                        }
                    })
            },
            submit(){
                console.log(this.form)
                // let user = this.form
                axios.put('/updateTeacher',this.form)
                    .then(response=>{
                        let code = response.data.code
                        console.log(code)
                        let message = response.data.message
                        if (code == 200){
                            this.$message({showClose:true,message:message,type:'success'})
                            this.getTeacherList();
                        }else {
                            this.$message({showClose:true,message:message,type:'error'})
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            reset(){
                this.form.teacherId = null;
                this.form.password = null;
                this.form.personid = null;
                this.form.name = null;
                this.form.sex = null;
                this.form.age = null;
                this.form.phone = null;
            },
            add(){
                console.log(this.form)
                axios.post('/addTeacher',this.form)
                    .then(response=>{
                        let code = response.data.code
                        let message = response.data.message
                        if (code = 200){
                            this.$message({showClose:true,message:message,type:'success'})
                        }else {
                            this.$message({showClose:true,message:message,type:'error'})
                        }
                    })
                    .catch(response =>{
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>